<template>
  <a-modal
    :title="title"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="hideModal"
    :maskClosable="false"
    destroyOnClose
  >
    <a-form-model
      :model="formData"
      :rules="rules"
      ref="myForm"
      :style="{ width: '100%' }"
      layout="horizontal"
      v-bind="{
        labelCol: { span: 4 },
        wrapperCol: { span: 20 }
      }"
      :colon="true"
      labelAlign="left"
    >
      <a-row style="height: 100%">
        <a-col :span="24">
          <a-form-model-item label="名称" prop="roleName" extra="" v-bind="{}">
            <a-input
              v-model="formData.roleName"
              placeholder=""
              :allowClear="true"
              size="default"
              :disabled="false"
            ></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="状态" prop="state" extra="" v-bind="{}">
            <a-radio-group v-model="formData.state" button-style="outline" size="default" :disabled="false">
              <a-radio v-for="(opt, idx) in state_options" :key="idx" :value="opt.value">
                {{ opt.label }}
              </a-radio>
            </a-radio-group>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item label="备注" prop="note" extra="" v-bind="{}">
            <a-textarea
              v-model="formData.note"
              placeholder=""
              :allowClear="true"
              :autoSize="{ minRows: 2, maxRows: 4 }"
              :disabled="false"
            ></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { get, add, upd } from '@/api/sys/role.js'

export default {
  name: 'Edit',
  components: {},
  props: [],
  data () {
    return {
      visible: false,
      title: '添加/编辑',
      confirmLoading: false,
      defaultFormData: {
        id: '',
        roleName: '',
        state: '1',
        note: ''
      },
      formData: Object.assign({}, this.defaultFormData),
      rules: {
        roleName: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          },
          {
            max: 50,
            message: '名称最大长度不能大于50',
            trigger: 'blur'
          },
          {
            min: 2,
            message: '名称最小长度不能小于2',
            trigger: 'blur'
          }
        ],
        state: [
          {
            required: true,
            message: '状态不能为空',
            trigger: 'change'
          }
        ],
        note: [
          {
            max: 500,
            message: '备注最大长度不能大于500',
            trigger: 'blur'
          }
        ]
      },
      state_options: [
        {
          label: '启用',
          value: 1
        },
        {
          label: '禁用',
          value: 0
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    showModal (id) {
      if (id) {
        this.title = '编辑'
        get({ id: id }).then(res => {
          console.log('res :>> ', res)
          this.formData = this.$utils.mergeObjSamePro(this.defaultFormData, res.data)
        })
      } else {
        this.title = '添加'
        this.formData.state = 1
      }
      this.visible = true
    },
    hideModal () {
      this.formData = Object.assign({}, this.defaultFormData)
      this.confirmLoading = false
      this.visible = false
      this.$refs['myForm'].resetFields()
    },
    handleOk () {
      this.confirmLoading = true
      this.$refs['myForm'].validate(valid => {
        if (!valid) {
          this.confirmLoading = false
        } else {
          if (this.formData.id) {
            upd(this.formData).then(res => {
              if (res.code === 1) {
                this.$message.success('修改成功')
                this.$emit('search')
                this.hideModal()
              }
            })
          } else {
            add(this.formData).then(res => {
              if (res.code === 1) {
                this.$message.success('添加成功')
                this.$emit('search', { pageNumber: 1 })
                this.hideModal()
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style scoped lang="less">
/*复选框样式*/
.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0px;
}
</style>
